<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册页面</title>
<%--    样式--%>
<%@include file="/pages/common/plug_.jsp"%>
    <%--    样式--%>
    <script type="text/javascript">
        $(function () {
            $("#code_img").click(function () {
                this.src = "${pageScope.Path}/kaptcha.jpg?d=" + new Date();
            });

            $("#txt_username").blur(function () {
                var username = $(this).val();
                $.getJSON("${pageScope.Path}/userServlet","action=existsUsername&username=" + username,function (data) {
                    if (data.exists){
                        $("#errorMsg").text("用户名已存在");
                    }else {
                        $("#errorMsg").text("用户名可用");
                    }
                })
            });

            $("#btn_register").click(function () {
                // 用户名
                var usernameText = $("#txt_username").val();
                var usernamePatt = /^\w{5,12}$/;
                if (!usernamePatt.test(usernameText)) {
                    $("#errorMsg").text("用户名不合法");
                    return false;
                }

                // 密码
                var passwordText = $("#txt_password").val();
                var passwordPatt = /^\w{5,12}$/;
                if (!passwordPatt.test(passwordText)) {
                    $("#errorMsg").text("密码不合法");
                    return false;
                }

                // 确认密码
                var repasswordText = $("#txt_repassword").val();
                var repasswordPatt = /^\w{5,12}$/;
                if (repasswordText != passwordText) {
                    $("#errorMsg").text("密码不一致");
                    return false;
                }

                // 电子邮箱
                var emailText = $("#txt_email").val();
                var emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
                if (!emailPatt.test(emailText)) {
                    $("#errorMsg").text("邮箱格式不正确");
                    return false;
                }

                // 验证码
                var codeText = $("#txt_code").val();
                codeText = $.trim(codeText);
                if (codeText == null || codeText == "") {
                    $("#errorMsg").text("验证码不正确");
                    return false;
                }

                $("#errorMsg").text("");
            })
        })
    </script>
</head>
<body>
<div class="unLoginWrap">
    <!-- 注册页面头部 -->
<%@ include file="/pages/common/Login_head.jsp"%>
    <!-- /注册页面头部 -->

    <!-- 注册页面主体 -->
    <div class="registerMian">
        <form action="${pageScope.Path}/userServlet" method="post" id="register_form" name="form">
            <input type="hidden" value="regist" name="action" id="action">
            <div id="bd">
                <div class="register_box">
                    <div class="head">
                        <a tabindex="11" class="more" name="help" href="#">注册帮助</a>
                        <p class="coupon_words">
                            <label>完成手机/邮箱验证注册，可以选商品实现购物！ </label>
                        </p>
                        <h3> 注册新用户</h3>
                    </div>
                    <div class="body">
                        <table width="100%" cellspacing="0" cellpadding="0" border="0">
                            <tbody>
                            <tr>
                                <td class="t">
                                    用户姓名：
                                </td>
                                <td id="in_username">
                                    <input type="text" tabindex="1" placeholder="请输入用户名" class="text" name="username"
                                           id="txt_username" value="${username}">
                                </td>
                            </tr>
                            <tr>
                                <td class="t">
                                    登录密码：
                                </td>
                                <td id="in_password">
                                    <input type="password" tabindex="2" placeholder="请输入密码"
                                           autocomplete="off" class="text" name="password"
                                           id="txt_password" value="123456">
                                </td>
                            </tr>
                            <tr>
                                <td class="t">
                                    确认密码：
                                </td>
                                <td id="in_repassword">
                                    <input type="password" tabindex="3" placeholder="请再次输入密码"
                                           autocomplete="off" class="text" name="again_password"
                                           id="txt_repassword" value="123456">
                                </td>
                            </tr>
                            <tr>
                                <td class="t">
                                    电子邮箱：
                                </td>
                                <td class="z_index2">
                                    <input type="text" tabindex="4" maxlength="40" class="text"
                                           placeholder="请输入邮箱" name="email" id="txt_email"
                                           style="border-color: rgb(127, 157, 185);"
                                           value="${empty requestScope.email?"xiaoyong168@qq.com":requestScope.email}">
                                </td>
                            </tr>
                            <tr>
                                <td class="t">
                                    验证码：
                                </td>
                                <td id="in_verification">
                                    <input type="text" placeholder="请输入验证码" autocomplete="off"
                                           tabindex="5" class="text1" name="code" id="txt_code"
                                           value="">
                                    <span><img style="width: 73px; height: 34px" id="code_img"
                                               src="${pageScope.Path}/kaptcha.jpg"></span>
                                </td>
                            </tr>
                            <tr>
                                <td class="t">&nbsp;
                                    <!--                                点击注册-->
                                    <span id="errorMsg" style="color: red">${msg}</span>
                                </td>
                                <td>
                                    <input type="submit" tabindex="6" value="立刻注册"
                                           title="注册" class="btn_login" name="g" id="btn_register">
                                </td>
                            </tr>
                            <tr>
                                <td class="t">&nbsp;

                                </td>
                                <td class="clause">
                                        <span class="float_l">
                                        <input type="checkbox" tabindex="7" checked="checked"
                                               name="chb_agreement" id="chb_agreement">我已阅读并同意
                                            <a tabindex="9" target="_blank"
                                               href=" http://help.dangdang.com/details/page12">《便民购交易条款》</a>
                                            和<a tabindex="10" target="_blank"
                                                href="http://help.dangdang.com/details/page42">《便民购社区条款》</a>
                                        </span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </form>
    </div>
    <!-- /注册页面主体 -->

    <!--footer-->
    <%@include file="/pages/common/common_footer.jsp"%>
    <!--footer-->

</div>
</body>
</html>